<template>
	<view class="page_edu">
		<view class="page_edu_header">
			<view class="header">
				<image src="/static/icon_main.png" class="btn" @click="scanCode"></image>
				<view class="input">
					<image src="/static/search.png" class="search"></image>
					<input type="text" value="" placeholder="搜索" confirm-type="search" @confirm="search"  style="font-size: 16px;"/>
				</view>
				<image src="/static/msg.png" class="btn" @click="toMessage"></image>
			</view>
			<view class="">
				<view class="uni-padding-wrap">
					<view class="page-section swiper">
							<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
								<swiper-item v-for="(it, i) in adList">
									<view class="swiper-item uni-bg-red" style="width:100%;height:100%">
										<image style="width:100%;height:100%" :src="host+'/core/file/download/'+it.imgid" class=""></image>
									</view>
								</swiper-item>
							</swiper>
					</view>
				</view>
			</view>
		</view>
		<view class="page_content">
			<view class="menu">
				<template v-for="(it,i) in menus">
					<view class="item" :key="'menu_'+i"  @click="navigateOne(it)">
						
						<view class="img_view" :style="{background: it.bg}">
							<uni-badge :text="it.count" v-if="it.count>0" type="primary"></uni-badge>
							<image :src="it.icon" class="image"></image>
						</view>
						<text class="txt">{{it.txt}}</text>
					</view>
				</template>
			</view>
			<scroll-view scroll-y="true" class="slider">
				<view style="background: #FFFFFF;padding: 15px;margin-top: 15px;    font-size: 20px;"><text style="width: 20px;background: #1E90FF;color:#1E90FF;margin-right:15px"> | </text>检测数据</view>
				<template v-for="(it, i) in records">
					<view class="item" :key="'slider_item_'+i"  @click="todetail(it.id,it.type)">
						<view class="item_content">
							<view class="title">
								<text class="first">{{it.title}}</text>
								<text class="main">检测人：{{it.createUser}}</text>
								<text class="sub">状态：{{it.stateText}}</text>
							</view>
							<view class="image" >{{it.datetime}}</view>
							<!-- <text class="free">免\n费</text> -->
						</view>
					</view>
				</template>
			</scroll-view>
			<!-- <view class="ad">
				<view class="ad_btn">
					<text class="title"></text>
					<text class="sub_title">100元</text>
				</view>
				<image src="/static/tag.png" class="bg"></image>
			</view> -->
		</view>
		<!-- <scroll-view scroll-x="true" class="slider">
			<template v-for="(it, i) in records">
				<view class="item" :key="'slider_item_'+i" :style="{background: it.bg, marginRight: i === records.length - 1 ? '15px' : '0px'}">
					<view class="item_content">
						<view class="title">
							<text class="first">{{it.title}}</text>
							<text class="main">主讲：{{it.mainTeacher}}</text>
							<text class="sub" :style="{color:it.subColor}">标题名称</text>
						</view>
						<image class="image" :src="it.icon"></image>
						<text class="free">免\n费</text>
					</view>
				</view>
			</template>
		</scroll-view> -->
		
	</view>
</template>

<script>
	import api from '../../api.js';
	import uniBadge from "@/components/uni-badge.vue"
	var util = require('../../common/util.js');
	export default {
		components: {uniBadge},
		data() {
			return {
				host:api.HOST,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				uprefresh:0,
				page:1,
				menus: [{
						bg: 'linear-gradient(0deg,rgba(9,216,162,1),rgba(90,242,217,1))',
						icon: '/static/img/home/nav_1.png',
						txt: '申请检测',
						count:0,
						url: '/pages/jiance/toAdd'
					},
					{
						bg: 'linear-gradient(0deg,rgba(251,184,35,1),rgba(255,228,40,1))',
						icon: '/static/img/home/nav_2.png',
						txt: '驳回申请',
						count:0,
						url: '/pages/jiance/list?type=bohui'
					},
					{
						bg: 'linear-gradient(0deg,rgba(255,126,34,1),rgba(240,184,27,1))',
						icon: '/static/img/home/nav_3.png',
						txt: '通过申请',
						count:0,
						url: '/pages/jiance/list?type=tongguo'
					},
					{
						bg: 'linear-gradient(0deg,rgba(9,177,252,1),rgba(24,200,255,1))',
						icon: '/static/img/home/nav_4.png',
						txt: '完成检测',
						count:0,
						url: '/pages/jiance/list?type=finish'
					}
				],
				adList:[],
				records: []
			}
		},
		onPullDownRefresh() {
			this.page=1;
			this.uprefresh=1;
			this.getList();
			this.selectCount();
		},
		onLoad() {
			if (api.login()) {//
				// #ifdef APP-PLUS
				this.version = plus.runtime.version;
				uni.subscribePush({
					provider: 'igexin',
					success: function(res) {
						//plus.ui.alert('success:' + JSON.stringify(res));
					}
				});
				uni.onPush({
					provider: 'igexin',
					success: function() {
						//plus.ui.alert('监听透传成功');
					},
					callback: function(data) {
						//plus.ui.alert("接收到透传数据：" + JSON.stringify(data));
					}
				});
				plus.push.addEventListener("click", function(msg) {
					var payload = (plus.os.name == 'iOS') ? msg.payload : JSON.parse(msg.payload);
					if (payload && payload.url)
						uni.navigateTo({
							url: payload.url
						})
				}, false);
				//#endif
				this.getList();
				this.getAdList();
				this.selectCount();
			}
		},
		methods: {
			selectCount(){
				var that=this
				api.post({
					url: 'api/selectCount.do',
					data: {
						userId:uni.getStorageSync('token')
					},
					success(result) {
						if(result.code==0){
							var menu=[];
							that.menus.map((o) => {
								o.count=result.data[o.txt]
								menu.push(o);
							});
							that.menus=menu
						}
					}
				});
			},
			getList() {
				var that=this
				api.post({
					url: 'api/testList.json',
					data: {
						page: this.page,
						type:'all',
						userId:uni.getStorageSync('token'),
						limit: 10
					},
					success(result) {
						if(result.code==0){
								
							if(that.page==1){
								that.records=[];
							}
							result.data.map((news) => {
								that.records.push({
									id: news.id,
									datetime: util.friendlyDate(news.createTime),
									title: news.testName,
									stateText:news.stateText,
									type:news.type,
									createUser:news.createUserName
								});
							});
							if(that.uprefresh==1){
								that.uprefresh=0;
								uni.stopPullDownRefresh();
							}
						}else{
							this.loadingText='暂无数据';
						}
						
					}
				});
			},
			getAdList() {
				var that=this
				api.post({
					url: 'api/adList.json',
					data: {
						page: this.page,
						limit: 10
					},
					success(result) {
						if(result.code==0){
							that.adList=result.data;
						}
						
					}
				});
			},
			todetail(id,type){
				uni.navigateTo({
					url: '/pages/jiance/detail'+type+'?id='+id
				})
			},
			toMessage(){
				uni.navigateTo({
					url: '/pages/message/message-list'
				})
			},
			search(event){
				uni.navigateTo({
					url: '/pages/jiance/list?type=all&testName='+event.detail.value
				})
			},
			navigateOne(item){
				uni.navigateTo({
					url: item.url
				})
			},
			scanCode() {
				util.imgHandle.scanCode().then(res => {
					uni.navigateTo({
						url: '/pages/jiance/test?id=0&url='+encodeURIComponent(api.HOST+"/api/testCode.do?code="+res.result)
					})
				}).catch(err => {
					console.log('扫码失败');
					console.log(err);
				})
			},
		}
	}
</script>

<style>
	page {
		width: 100%;
		background-color: #ebebeb;
	}
	.uni-badge {
		color: #fff;
		background-color: #007aff;
		position: absolute;
		margin: -15px 35px;
	}
	
</style>
<style lang="scss" scoped>
	@function realSize($args) {
		@return $args / 1.5;
	}

	.page_edu {
		width: 100%;
	}

	.page_edu_header {
		padding-top: var(--status-bar-height);
		background-color: #1E90FF;
		width: 100%;
		height: realSize(415px);

		.header {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: realSize(20px);

			.btn {
				width: realSize(36px);
				height: realSize(30px);
			}

			.input {
				height: realSize(59px);
				width: 100%;
				margin-left: realSize(20px);
				margin-right: realSize(20px);
				background: rgba(255, 255, 255, 1);
				border-radius: realSize(30px);
				display: flex;
				flex-direction: row;
				align-items: center;

				.search {
					width: realSize(30px);
					height: realSize(30px);
					margin-left: realSize(20px);
					margin-right: realSize(20px);
				}
			}
		}

		.header_content {
			display: flex;
			flex-direction: row;

			.left {
				display: flex;
				flex-direction: column;
				width: 57%;
				margin-top: 10px;
				margin-left: 15px;
				margin-right: 15px;

				.title {
					width: realSize(419px);
					height: realSize(59px);
					font-size: realSize(47px);
					font-weight: bold;
					color: rgba(255, 255, 255, 1);
				}

				.sub_title {
					margin-top: 3px;
					font-size: realSize(22px);
					font-weight: 400;
					color: rgba(255, 255, 255, 1);

					background: linear-gradient(0deg, rgba(120, 255, 224, 1) 0%, rgba(255, 255, 255, 1) 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				.btn {
					margin-top: 3px;
					width: realSize(198px);
					height: realSize(60px);
					background: linear-gradient(-30deg, rgba(252, 135, 29, 1), rgba(246, 185, 9, 1));
					box-shadow: 0px 4px 10px 0px rgba(255, 121, 0, 0.5);
					border-radius: realSize(30px);
					color: rgba(255, 255, 255, 1);
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.page_content {
		width: 100%;
		margin-top: -54px;

		.menu {
			margin-left: 10px;
			margin-right: 10px;
			padding-left: 10px;
			padding-right: 10px;
			height: realSize(176px);
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 10px 10px 0px rgba(0, 161, 124, 0.1);
			border-radius: 10px;
			display: flex;
			flex-direction: row;
			align-items: stretch;
			justify-content: space-between;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.img_view {
					width: 60px;
					height: 60px;
					border-radius: 30px;
					display: flex;
					align-items: center;
					justify-content: center;

					.image {
						width: 50px;
						height: 50px;
					}
				}

				.txt {
					margin-top: 5px;
					font-size: 14px;
					color: rgba(51, 51, 51, 1);
				}
			}
		}

		.s_menu {
			display: flex;
			flex-direction: row;
			align-items: stretch;
			justify-content: space-between;
			margin-top: 15px;
			margin-left: 10px;
			margin-right: 10px;
			padding-left: 10px;
			padding-right: 10px;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.image {
					width: 35px;
					height: 35px;
				}

				.txt {
					margin-top: 5px;
					font-size: 14px;
					color: rgba(51, 51, 51, 1);
				}
			}
		}

		.ad {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.bg {
				position: absolute;
				width: 120px;
				height: 105px;
				left: 0;
			}

			.ad_btn {
				width: 100%;
				height: 63px;
				margin: 30px;
				background: linear-gradient(0deg, rgba(253, 155, 28, 1), rgba(251, 197, 33, 1));
				border-radius: 67px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.title {
					font-size: realSize(38px);
					font-family: PingFang-SC-Heavy;
					font-weight: 800;
					color: rgba(255, 255, 255, 1);
				}

				.sub_title {
					background: linear-gradient(0deg, rgba(255, 128, 37, 1), rgba(255, 153, 32, 1));
					box-shadow: 0px 4px 5px 0px rgba(92, 53, 48, 0.3), 0px 1px 0px 0px rgba(228, 228, 228, 1);
					border-radius: realSize(24px);
					font-size: realSize(24px);
					font-family: PingFang-SC-Heavy;
					font-weight: 800;
					font-style: italic;
					color: rgba(255, 236, 177, 1);
					line-height: realSize(26px);
				}
			}
		}
	}

	.slider {
		white-space: nowrap;
		width: 100%;
		margin-bottom: 50px;
		.item {
			background-color: white;
			padding-left: 15px;
			margin-bottom: 13px;
			height: 125px;

			.item_content {
				display: flex;
				flex-direction: row;

				.title {
					width: 36%;
					margin: 20px;
					display: flex;
					flex-direction: column;
					
					.first {
						font-size: 16px;
						color:rgba(46,65,69,1);
					}
					.main {
						font-size: 13px;
						color:rgba(79,103,101,1);
						margin-top: 5px;
					}
					.sub {
						width: 60px;
						font-size: 10px;
						margin-top: 20px;
						background:rgba(255,255,255,0.4);
						border-radius:5px;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.image {
					margin-top: 50px;
					font-size: 13px;
				}

				.free {
					background: rgba(11, 147, 252, 1);
					border-radius: 0px 0px 22px 22px;
					width: 25px;
					height: 50px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;
					font-size: 14px;
				}
			}
		}
	}
</style>
